@import '../../../../scss/colors.scss';

.project-detail {
    width: 100%;
    max-width: 1546px;
    margin: 0 auto;
    background: #fff;
    padding: 30px 20px;

    &-top {
        padding-bottom: 30px;
        display: flex;
        justify-content: space-between;
        // align-items: center;

        img {
            width: 300px;
            height: 300px;
            margin-right: 10px;
        }

        .project-detail-top-right {
            width: 100%;

            .titel {
                font-size: 24px;
                display: flex;

                .titel-text {
                    width: 552px;
                }

                span {
                    padding: 23px;
                    color: #999999;
                    font-size: 14px;
                }
            }

            .del {
                background: #F1F1F0;
                width: 640px;
                height: 90px;
                padding: 10px 20px;

                .del-text {
                    display: flex;
                    font-size: 14px;
                    label {
                        color: #333333;
                        font-size: 14px;
                        padding: 10px;
                    }

                    h1 {
                        font-size: 24px;
                        font-weight: bold;
                        color: #FF4343;
                    }

                    h2 {
                        font-size: 14px;
                        color: #FF4343;
                    }
                    p{margin: 0 10px;}
                }
            }

            .s-f{
                padding: 10px 20px;
                line-height: 36px;
            }
            .sc-c{
                display: flex;
                .login-btn {
                    width: 180px;
                    height: 48px;
                    font-size: 14px;
                    padding: 13px 61px;
                    color: $primary-color;
                    border: 1px solid $primary-color;
                    border-radius: 20px;
                    &:active {
                        background: darken($primary-color, 10%);
                    }
                }
    
                .sub-btn {
                    display: block;
                    width: 180px;
                    height: 48px;
                    background: #FF4343;
                    border-radius: 24px;
                    line-height: 48px;
                    text-align: center;
                    color: #fff;
                    font-size: 20px;
    
                    &:active {
                        background: darken(#FF4343, 10%);
                    }
                }

                .sc{
                    display: flex;
                    padding: 20px;
                   .sc-img{
                        width: 15px;
                        height: 16px;
                        margin-right: 10px;
                        img{
                            width: 100%;
                            height:100%
                        }
                   } 
                }
            }
        }

    }

    &-center {
        padding: 27px 0;
        display: flex;
        border-bottom: 1px solid #F1F1F1;

        .detail-item {
            position: relative;
            width: 25%;
            padding-left: 67px;

            .detail-item-3 {
                display: flex;
            }

            >img {
                position: absolute;
                left: 0;
                top: 0;
                width: 62px;
                height: 62px;
            }

            >div {
                p {
                    font-size: 18px;
                    line-height: 30px;
                    color: #999;
                    margin-bottom: 0;
                }

                .detail-item-1,
                .detail-item-4 {
                    font-size: 18px;
                    color: #333;
                }

                .rate-box {
                    margin-top: 10px;
                }
            }
        }
    }

    &-info {
        padding-right: 390px;
        position: relative;

        &-left {
            width: 100%;
        }

        &-right {
            position: absolute;
            right: 0;
            top: 80px;
            width: 305px;

            .project-detail-right-box {
                &-head {
                    height: 64px;
                    padding-left: 15px;
                    background: linear-gradient(0deg, rgba(243, 243, 243, 1), rgba(255, 255, 255, 1));

                    span {
                        height: 20px;
                        line-height: 20px;
                        margin-top: 22px;
                        font-size: 18px;
                        font-weight: bold;
                        border-left: 2px solid #00A4FF;
                        padding-left: 15px;
                        display: inline-block;
                    }
                }

                &-body {
                    padding: 30px;
                    border: 1px solid #f1f1f1;

                    ul {
                        padding: 0;
                    }

                    li {
                        display: flex;

                        img {
                            width: 69px;
                            height: 69px;
                            margin-right: 10px;
                        }

                        div {
                            h3 {
                                font-size: 18px;
                                color: #333;
                            }

                            p {
                                font-size: 18px;
                                color: #999;
                            }
                        }
                    }
                }
            }
        }
    }

    &-box {
        padding: 30px 0;
        border-bottom: 1px solid #f1f1f1;

        &-head {
            font-size: 22px;
            line-height: 22px;
            padding-left: 20px;
            border-left: 2px solid $primary-color;
            font-weight: bold;
            color: #333;
            margin-bottom: 30px;
        }

        &-body {
            font-size: 18px;
            font-weight: 400;
            color: #333;
            line-height: 24px;
        }
    }
}

.tab-detail{
    background: #fff;
    padding: 20px;
    margin-top: 10px;
}